<template>
  <div class="list">
    <!-- 搜索栏 -->
    <van-sticky>
      <van-search
        show-action
        shape="round"
        placeholder="请输入搜索关键词"
        disabled
        @click="onSearch"
      >
        <template #left>
          <van-icon size="24" @click="goBack" name="arrow-left" />
        </template>
      </van-search>
    </van-sticky>
    <!-- 主体 -->
    <section ref="sec">
      <div class="list-l" ref="left">
        <ul class="l-item">
          <li
            ref="l_item"
            :class="{ active: index === currentIndex }"
            v-for="(item, index) in leftData"
            :key="index"
            @click="goScroll(index)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="list-r" ref="right">
        <ul>
          <li class="shop-list">
            <ul
              class="r-content"
              v-for="(item, index) in rightData"
              :key="index"
            >
              <li v-for="(k, i) in item.app_category_items" :key="i">
                <img :src="k.cover" />
                <span>{{ k.name }}</span>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </section>
    <!-- 引入tabbar组件 -->
    <!-- <tabbar /> -->
  </div>
</template>

<script>
import BScroll from "better-scroll";
export default {
  data() {
    return {
      currentIndex: 0, // 当前选中index
      flag: false, // 解决是否选中当前分类index
      leftData: [],
      rightData: [],
      left: [],
      rightBScroll: "", //右侧滑动
      allHeight: [], //承载右侧每一块高度值
      scrollY: "", //右侧滚动距离
    };
  },
  mounted() {
    let a = this.$refs.sec;
    a.style.height = document.documentElement.clientHeight - 95 + "px";
  },
  created() {
    //数据请求
    this.$axios.get("/category/app_category").then((v) => {
      console.log(v);

      let letArr = [];
      let rightArr = [];
      v.data.data.forEach((res) => {
        letArr.push({
          id: res.id,
          name: res.name,
        });
        // console.log(res.app_category_items);
        rightArr.push(res);
      });
      this.leftData = letArr;
      this.rightData = rightArr;
      // console.log(this.rightData);
      this.$nextTick(() => {
        //左侧滑动
        this.left = new BScroll(this.$refs.left, {
          click: true,
          probeType: 3,
        });
        //右侧滑动
        this.rightBScroll = new BScroll(this.$refs.right, {
          probeType: 3, // 是否会截流scroll事件
          click: true, // 是否开启点击事件
        });
        //统计右侧所有版块高度值
        let height = 0;
        this.allHeight.push(height);
        //获取右侧每一块高度
        // console.log(this.$refs.right.getElementsByClassName('r-content'));
        let uls = this.$refs.right.getElementsByClassName("r-content");
        //把获取的dom对象转化成真正的数组
        Array.from(uls).forEach((v) => {
          height += v.clientHeight;
          this.allHeight.push(height);
          // console.log(v.clientHeight);
        });

        //得到右侧滚动的值
        this.rightBScroll.on("scroll", (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
          // console.log(this.scrollY);
          for (let i = 0; i < this.allHeight.length; i++) {
            if (
              this.scrollY > this.allHeight[i] &&
              this.scrollY < this.allHeight[i + 1]
            ) {
              if (!this.flag) {
                this.currentIndex = i;
                console.log(this.currentIndex);
              }
            }
          }
        });

        this.rightBScroll.on("scrollEnd", (pos) => {
          //结束时触发事件获取一次位置，因为使用了模式2，惯性滚动不触发事件
          this.scrollY = Math.abs(Math.round(pos.y));
          this.flag = false;
        });
      });
    });
  },
  methods: {
    //返回上一页
    goBack() {
      history.back();
    },
    //搜索
    onSearch() {
      // this.$router.push('/search')
    },
    //点击事件
    goScroll(index) {
      this.flag = true;
      this.currentIndex = index;
      this.rightBScroll.scrollTo(0, -this.allHeight[index], 300);
      console.log(this.allHeight[index]);
    },
  },
};
</script>

<style>
div.van-search {
  padding-bottom: 0 !important;
}

section {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.list-l {
  width: 100px;
  background-color: rgb(95, 197, 204);
  overflow: hidden;
}

.list-l .l-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
}

.list-l .l-item li {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 16px;
}

.l-item li.active {
  border-left: 3px solid #f60;
  color: #f60;
}

.list-r {
  /* width:100%;
  height: 100%; */
  /* height: 100%; */
  /* overflow: scroll; */
  flex: 1;
  overflow: hidden;
}

.list-r .shop-list {
  text-align: center;
  /* overflow-y: scroll; */
}

.list-r::-webkit-scrollbar {
  width: 0 !important;
}

.list-r .shop-list .r-content {
  display: flex;
  flex-wrap: wrap;
}

/* .r-content:last-child{
  margin-bottom: 50px;
} */

.shop-list .r-content li {
  display: flex;
  height: 90px;
  flex-direction: column;
  margin-left: 24px;
}

.r-content li img {
  width: 60px;
  height: 60px;
}

.r-content li span {
  font-size: 16px;
}
</style>
